<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/common.css">
</head>
<style>
    .crumbs{
        height: 63px;
        line-height: 63px;
    }
    .crumbs .item:last-child{
        font-weight: 600;
    }
    .operation{
        background-color: rgb(251, 253, 254);
    }
    .operation ul{
        margin-left: 20px;
        display: flex;
        justify-content: flex-start;
    }
    .operation ul li{
        height: 63px;
        line-height: 63px;
        margin-right: 50px;
    }
    .operation ul li:first-child{
        color: gray;
    }
    .operation ul li span:nth-child(n+1){
        cursor: pointer;
        border-radius: 10px;
        padding: 10px;
    }
    .operation ul li span:nth-child(n+1):hover{
        background-color: rgba(194, 191, 191,0.1);
    }
    .active{
        color: rgb(186, 9, 9);
    }
    .shop-item{
        padding: 24px;
        box-sizing: border-box;
        width: 285px;
        height: 382px;
        background-color: white;
        text-align: center;
        cursor: pointer;
        margin-top: 25px;
        transition: all 0.3s;
    }
    .shop-item:hover{
        box-shadow: 0px 0px 20px 10px rgba(0,0,0,0.1);
        transform: translate(0,-5px);
    }
    .shop-item img{
        width: 165px;
        height: 175px;
    }
    .yh{
        font-size: 12px;
        display: inline-block;
        border: 1px solid red;
        padding: 5px;
        margin: 10px 10px 0 0;
        color: red;
        border-radius: 5px;
    }
    .shop-name{
        padding: 10px 0;
        font-weight: 700;
    }
    .shop-text{
        color: gray;
    }
    .shop-item p{
        color: rgb(197, 42, 42);
    }
    .shop-main{
        margin-top: 10px;
    }
    .shop-body{
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        padding-bottom: 30px;
    }
</style>
<body>
    <div class="warper">
        <div class="crumbs">
            <span class="item">首页</span>
            <span>&gt;</span>
            <span class="item">手机</span>
        </div>
        <div class="operation">
            <div class="category">
                <ul>
                    <li>
                        分类：
                    </li>
                    <li>
                        <span class="checked">笔记本</span>
                    </li>
                    <li>
                        <span>台式机</span>
                    </li>
                    <li>
                        <span>显示屏</span>
                    </li>
                </ul>
            </div>
            <div class="discount">
                <ul>
                    <li>优惠：</li>
                    <li class="item">
                        <span>分期免息</span>
                    </li>
                    <li class="item">
                        <span>赠送积分</span>
                    </li>
                    <li class="item">
                        <span>限时特价</span>
                    </li>
                </ul>
            </div>
            <div class="sort">
                <ul>
                    <li>排序：</li>
                    <li>
                        <span class="checked">综合</span>
                    </li>
                    <li>
                        <span>最新</span>
                    </li>
                    <li>
                        <span>评论数</span>
                    </li>
                    <li>
                        <span>价格</span>
                    </li>
                </ul>
            </div>
        </div>
        <div class="shop-main">
            <ul class="shop-body">
            </ul>
        </div>
    </div>
    <script src="./json/banner.js"></script>
    <script src="./json/data.js"></script>
    <script>
        const url = "https://res.vmallres.com";
        const shops = document.querySelector('.shop-body');
        const discountArr = [];
        getShopList()
        // 获取过滤后的商品列表
        function getShopList(){
            let shopList = resultList;
            shopList = shopList.filter((i)=>{
                let flag = true;
                for(let j=0;j<discountArr.length;j++){
                    if(!i.promoLabels.includes(discountArr[j])){
                        flag = false;
                        break;
                    }
                }
                return flag;
            })
            shops.innerHTML = ""
            for(let i=0;i<shopList.length;i++){
                var data = shopList[i];
                let msg = '';
                for(let n of data.promoLabels){
                    msg+=`<div class="yh">${n}</div>`
                }
                shops.innerHTML+=`<li class="shop-item">
                    <img src="${url}${data.photoPath}${data.photoName}" alt="">
                    <div>
                        ${msg}
                    </div>
                    <div>
                        <div class="shop-name">
                            ${data.briefName}
                        </div>
                    </div>
                    <div class="shop-text">
                        dwadadawd|awdawdawdaw
                    </div>
                    <p>￥${data.price}</p>
                </li>`
            }
            shops.innerHTML+=`<li class=shop-item style="height:0px;padding:0px"></li>`;
            shops.innerHTML+=`<li class=shop-item style="height:0px;padding:0px"></li>`;
        }
        // 属性选择
        const discount = document.querySelector('.discount');
        const distUl = discount.querySelector('ul');
        
        // 遍历属性选择
        for(let j=0;j<distUl.children.length;j++){
            let new_node = distUl.children[j];
            new_node.addEventListener('click',function(){
                new_node.classList.toggle('active');
                let label = new_node.textContent.trim();
                if(new_node.classList.contains('active')){
                    discountArr.push(label)
                }else{
                    let index = discountArr.findIndex((i)=> i==label );
                    discountArr.splice(index,1);
                }
                getShopList()
            })
        }

    </script>
</body>
</html>